<!--我的说说详情-->
<style scoped>
.contain {
  margin-left: 10px;
  margin-right: 10px;
  background: #FFFFFF;
  height: 86%;
  overflow: auto;
}

.vux-flexbox {
  height: 100%;
}

.vux-flexbox-item {
  height: 100%;
}

.flex-demo {
  height: 100%;
}

.h-50e {
  height: 50%;
}

.sexIcon {
  height: 70%;
  vertical-align: middle
}

.slider-container {
  height: 400px !important;
}

.content {
  position: absolute;
  width: 95%;
  background: rgba(150, 150, 150, 0.7);
  z-index: 1;
  top: 3px;
}

.content-p {
  color: #FFFFFF;
  word-wrap: break-word;
}

.swiper {
  margin-top: 7px;
}

.align-middle {
  padding-left: 10px;
  text-align: left;
}

.comment {
  background: rgba(170, 170, 170, 0.5);
  position: absolute;
  width: 95%;
  top: 11.2%;
  z-index: 2;
}

.comment-font {
  font-size: 12px;
  margin-left: -10px;
  padding: 5px 10px;
}

.ok-btn {
  margin-right: -10px;
}

.popover-demo-content {
  padding: 5px 10px;
}

.comment-div {
  border-bottom: 1px #ECECEC solid;
}

.comment-div-out {
  position: absolute !important;
  width: 94%;
  bottom: 14%;
}

.flex-demo {
  text-align: center;
}

.vux-flexbox-item {
  margin-left: 0px !important;
}

</style>
<template>
  <div class="contain">
    <div style="border-bottom: 1px #42B983 solid;overflow: auto;">
      <div class="swiper">
        <swiper :options="swiperOption" ref="mySwiper">
          <!-- slides -->
          <swiper-slide v-for="item in data.list" key="item">
            <img width="100%" height="350px" :src="item" @click="clickImg"></img>
          </swiper-slide>
        </swiper>
      </div>
      <transition-group name="custom-classes-transition" enter-active-class="fadeIn" leave-active-class="fadeOut">
        <div class="content" key="2" v-show="showFontOnImg">
          <p class="content-p">{{data.content}}</p>
        </div>
      </transition-group>
    </div>
    <tab>
      <tab-item selected @on-item-click="switchTab(1)">评论</tab-item>
      <tab-item badge-background="#38C972" style="border-left: 1px #F2F2F2 solid;" badge-color="#fff" @on-item-click="switchTab(2)">赏分
        <span style="color: #EE3A4A;">{{hasReward}}</span>
      </tab-item>
    </tab>
    <!--评论-->
    <div v-show="switchComment">
      <div v-for="(item, index) in data2" class="comment-div" @click="selectToUserId(item.fromUserId, index)">
        <img v-if="item.fromUserId == userId" style="vertical-align: middle" height="20px" src="../../static/img/send.png"></img>
        <img v-else height="20px" style="vertical-align: middle" src="../../static/img/receive.png"></img>
        <p style="display: inline;">{{item.content}}</p>
        <img height="20px" @click="deletdComment(item.id)" style="vertical-align: middle; float: right;margin-right: 10px;" src="../../static/img/delete.png"></img>
      </div>
      <transition name="fade" enter-active-class="fadeIn" leave-active-class="fadeOut">
        <div v-if="showCommentDiv" class="comment-div-out">
          <group>
            <x-input class="comment-font" v-model="commentContent" placeholder="说些啥" :min="1" :max="21" @on-enter="sendComment" novalidate placeholder-align="left">
              <img slot="label" style="padding-right:10px;display:block;" src="../../static/img/comment.png" width="24" height="24">
              <x-button class="ok-btn" slot="right" type="primary" mini @click.native="sendComment">ok</x-button>
            </x-input>
          </group>
        </div>
      </transition>
    </div>
    <!--打赏记录-->
    <div v-show="switchReward">
      <div v-for="item in data3" style="padding: 3px 0;
				width: 97%;
				border-bottom: 1px #ECECEC solid;">
        <flexbox>
          <flexbox-item :span="2/12">
            <div class="flex-demo"><img :src="item.picture" height="20px" style="vertical-align: middle;"></div>
          </flexbox-item>
          <flexbox-item :span="8/12">
            <div class="flex-demo" style="text-align: left;"><span>{{item.nickName}}</span></div>
          </flexbox-item>
          <!--<flexbox-item :span="6/12">
						<div class="flex-demo"></div>
					</flexbox-item>-->
          <flexbox-item :span="2/12">
            <div class="flex-demo"><span style="color: #ffa22a">+{{item.integral}}</span></div>
          </flexbox-item>
        </flexbox>
      </div>
    </div>
  </div>
</template>
<script>
import {
  Tab,
  TabItem,
  Flexbox,
  FlexboxItem,
  Divider,
  Group,
  Cell,
  Marquee,
  MarqueeItem,
  XInput,
  XButton,
  Popover
} from 'vux'
require('swiper/dist/css/swiper.css')
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'vue2-animate/dist/vue2-animate.min.css'

export default {
  components: {
    Tab,
    TabItem,
    Flexbox,
    FlexboxItem,
    Divider,
    swiper,
    swiperSlide,
    Marquee,
    MarqueeItem,
    Group,
    Cell,
    XInput,
    XButton,
    Popover
  },
  data() {
    return {
      text1: 'Processing',
      userId: window.localStorage["userId"],
      toUserId: window.localStorage["userId"], //对谁的回复,默认对自己
      thoughtId: this.$route.query.thoughtId,
      data: [], //说说内容 图片
      preIndex: -1, //之前选择评论的索引 
      switchComment: true, //切换评论
      switchReward: false, //切换悬赏记录
      showFontOnImg: true, //图片上是否显示说说文字
      showCommentDiv: false, //是否显示评论输入框			
      data2: [], //评论
      commentContent: '', //评论内容
      hasReward: 0, //拥有的打赏积分
      data3: [], //悬赏记录
      swiperOption: { //以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
        // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，<br>　　　　　　　　假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,
        // swiper configs 所有的配置同swiper官方api配置
        autoplay: 0,
        direction: 'horizontal',
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        observeParents: true,
        // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
        debugger: true,
      }
    }
  },
  mounted() {
    this.getReward(); //获得的悬赏分
    this.getThought(); //获得说说
    this.queryComments(); //获得评论
  },
  methods: {
    //			点击评论,准备回复
    selectToUserId(toUserId, index) {
      let _that = this
      let allSelector = document.querySelectorAll(".comment-div")
      let nowTarget = allSelector[index]
      //如果已经选中，就取消
      if (nowTarget.style.background != '') {
        _that.toUserId = _that.userId
        nowTarget.style.background = ''
        _that.showCommentDiv = false
      } else {
        _that.toUserId = toUserId
        //去掉之前选中的
        if (_that.preIndex > -1) {
          let preTarget = allSelector[_that.preIndex]
          preTarget.style.background = ''
        }
        //新的选中
        nowTarget.style.background = "#ECECEC"
        _that.preIndex = index
        _that.showCommentDiv = true
      }
    },
    switchTab(index) {
      if (index == 1) {
        this.switchComment = true
        this.switchReward = false
      } else {
        this.switchComment = false
        this.switchReward = true
        this.queryRewardRecords()
      }
    },
    getReward() {
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/tdetail/getReward.json",
        params: {
          userId: this.userId,
          thoughtId: this.thoughtId
        },
        successFc: (response) => {
          this.hasReward = response.data.data
        }
      });
    },
    getThought() {
      let _that = this
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/tdetail/getThought.json",
        params: {
          userId: this.userId,
          thoughtId: this.thoughtId
        },
        successFc: (response) => {
          _that.data = response.data.data
        }
      });
    },
    queryRewardRecords() {
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/mytdetail/queryRewardRecords.json",
        params: {
          userId: this.userId,
          thoughtId: this.thoughtId
        },
        successFc: (response) => {
          this.data3 = response.data.data
        }
      });
    },
    queryComments() {
      let _that = this
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/mytdetail/queryComments.json",
        params: {
          userId: _that.userId,
          thoughtId: _that.thoughtId
        },
        successFc: (response) => {
          if (response.data.data.length == 0) {
            _that.showCommentDiv = true
          } else {
            _that.data2 = response.data.data
          }
        }
      });
    },
    clickImg() {
      if (this.showFontOnImg) {
        this.showFontOnImg = false
      } else {
        this.showFontOnImg = true
      }
    },
    sendComment() {
      let _that = this
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/tdetail/publicComment.json",
        params: {
          userId: _that.userId,
          thoughtId: _that.thoughtId,
          toUserId: _that.toUserId,
          content: _that.commentContent
        },
        successFc: (response) => {
          _that.commentContent = ''
          _that.queryComments();
        }
      });
    },
    deletdComment(commentId) {
      let _that = this
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/tdetail/deleteComment.json",
        params: {
          userId: _that.userId,
          thoughtId: _that.thoughtId,
          commentId: commentId
        },
        successFc: (response) => {
          _that.queryComments();
        }
      });
    },
    showPersonHome() {
      this.$router.push({
        path: '/tourl/personHome',
        query: {
          targetUserId: this.detailUserId
        }
      })
    }
  }
}

</script>
